<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
			mode="aspectFill"></image>

		<z-paging bg-color="rgba(0,0,0,0)" ref="paging" v-model="dataList" @query="queryList">
			<uv-navbar slot="top" bgColor="rgba(0,0,0,0)" leftIcon=" " :fixed="true" title="消息通知" placeholder></uv-navbar>
			<!-- 内容 -->
			<view class="contnet">
				<view class="list-box">
					<view class="list-item" v-for="(item, index) in dataList" :key="index" @click="goToDetail(item, index)">
						<view :style="item.is_read == 1 ? '' : 'opacity: 0.5;'">
							<view class="list-item-title">
								<view class="dot" v-if="item.is_read == 1"></view>
								<view class="title-box">{{ item.title }}</view>
							</view>
							<view class="list-item-data">
								<view class="list-item-data-item">[{{item.project_name}}] {{ item.content }}</view>
							</view>
							<view class="list-item-btn">
								<view class="tips-box">{{ item.created_at }}</view>
								<view class="btn">查看</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<image slot="empty" class="no-data" src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-tz.png"
				mode="widthFix"></image>
			<!-- 尾部 -->
			<tabbar slot="bottom" ref="tabbar"></tabbar>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				loading: true,
				read_loading: false,
			}
		},
		onShow() {
			uni.hideTabBar();
			this.$refs.tabbar.getUserInfo()
			this.$refs.paging.reload();
			setTimeout(() => {
				this.loading = false
			}, 300)
		},
		methods: {
			queryList(page, num) {
				this.getMessageList(page, num);
			},
			getMessageList(page, num) {
				this.$Api.getMessageList({
					is_read: 0,
					msg_type: 0,
					page,
					num
				}).then((res) => {
					console.log(res, '消息列表');
					if (res.code == 200) {
						let userInfo = uni.getStorageSync('userInfo');
						userInfo.unread_message_number = res.data.unread_message_number;
						uni.setStorageSync('userInfo', userInfo);
						this.$refs.paging.complete(res.data.list);
					} else {
						this.$refs.paging.complete(false);
					}
				}).catch((err) => {
					this.$refs.paging.complete(false);
				});
			},

			goToDetail(item, index) {
				console.log(item, 'sss');

				uni.navigateTo({
					url: '/pages/project_detail/project_detail?sn=' + item.project_id
				});

				if (item.is_read == 1) {
					if (this.loading) return;
					this.read_loading = true;

					this.$Api.readMessage({
						message_id_arr: [item.id]
					}).then((res) => {
						console.log(res, '消息已读');
						this.read_loading = false;
						if (res.code == 200) {
							this.dataList[index].is_read = 2;
							let userInfo = uni.getStorageSync('userInfo');
							userInfo.unread_message_number = userInfo.unread_message_number - 1;
							uni.setStorageSync('userInfo', userInfo);
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>